<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">车牌号</label>
        <div class="layui-input-block">
             <select name="carId" id="carSelect" lay-verify="required" lay-search="">
		          <option value="">直接选择或搜索选择</option>
	        </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">维修日期</label>
        <div class="layui-input-block">
             <input type="text" name="date" class="layui-input" id="orderDate" lay-verify="required" lay-reqtext="日期不能为空" placeholder="请输入日期" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">是否付款</label>
        <div class="layui-input-block">
             <input type="radio" name="status" value="0" title="未付款" checked="">
           	 <input type="radio" name="status" value="1" title="已付款">
        </div>
    </div>
    
     <div class="layui-form-item">
        <label class="layui-form-label">选择配件</label>
        <div class="layui-input-block">
            <input type="text" id="partSelect" name="part" placeholder="选择配件" value="" class="layui-input">
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">订单价格</label>
        <div class="layui-input-block">
            <input type="text" name="price" id="price" value="" class="layui-input">
        </div>
    </div>
   

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<!-- 使用tableSelect模块  需要引入 一个layuimini提供的js文件 -->
<script src="../../js/lay-config.js"></script>
<script>
    layui.use(['form','laydate','tableSelect'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            tableSelect = layui.tableSelect, //引入下拉表格
            $ = layui.$;
        //生成下拉表格的   
        
        var ids = [];
	    var counts = [];
        tableSelect.render({
            elem: '#partSelect',//点击哪个输入框 出现下拉表格  就写哪个输入的id
            checkedKey: 'id', //表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'keyword',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	//搜索输入框的提示文字 默认关键词搜索
            height:'400',  //自定义高度
            width:'900',  //自定义宽度
            table: {	//根table.render里面写的东西一样    只是无需再定义表格elem
                url:'/part/show',
                cols: [[
                        {type: "checkbox", width: 50},
                        {field: 'id', title: '配件编号', sort: true},
                        {field: 'name', title: '配件名字'},
                        {field: 'brand', title: '品牌'},
                        {field: 'type', title: '型号'},
                        {field: 'sellPrice', title: '零售单价'},
                        {field: 'count', title: '剩余数量'},
                        {field: 'use', title: '使用数量',edit:'text'}
                 ]],
                 parseData:function(res){
                 	for(p of res.list){
                 		p.providerName = p.provider.name;
                 		p.providerPhone = p.provider.phone;
                 		p.use = 0;
                 	}
                 	return {
                 		"code":0,
                 		"msg":"",
                 		"count":res.count,
                 		"data":res.list
                 	}
                 }
            },
            done: function (elem, data) {
	            //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
	            //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
	            //console.log(elem);
	            //console.log(data);
	            // 生成配件id的数组    生成使用数量的数组    生成订单价格
	         	ids = []; //重写选择的时候 将ids和counts清空
	            counts = [];
	            var price = 0;
	            var str = '';
	            for(p of data.data){
	            	//p.id     p.sellPrice   p.use
	            	ids.push(p.id); //构建配件id的数组
	            	counts.push(p.use);//构建使用数量的数组
	            	str+=p.name+"-"+p.use+"  ";
	            	price += Number.parseInt(p.use)*p.sellPrice; //订单价格
	            }
	           // console.log(ids);
	           // console.log(counts);
	           // console.log(price);
	            $('#price').val( price );
	            elem.val(str);
            }
        })    
            
            
            
		//生成日期框
        laydate.render({
            elem: '#orderDate', //指定元素
            type:'date'
        });
        
        //发送ajax请求  访问后台接口  获取车辆的id和车牌号	
       	$.post('/car/createSelect',function(res){
       		for(var i=0;i<res.length;i++){
       			$('#carSelect').append('<option value="'+res[i].id+'"> '+res[i].card+' </option>'); //给某个标签拼接子标签
       		}
       		//重写加载表单  才有效果
            form.render('select');
       	},'json');
     	
        //监听提交
        form.on('submit(saveBtn)', function (data) {
        	data.field.ids = ids;
        	data.field.counts = counts;
        	//ajax 传递数组给后台的时候  traditional 属性值必须写成true
        	
        	$.ajaxSettings.traditional = true; //全局设置ajax的属性
        	$.post('/order/add',data.field,function(res){
        		if(res==1){
        			layer.msg('新增成功',{icon:6,time:1000},function(){
        				//刷新父页面    reload() 函数 刷新
        				//window 代表当前页面   window.parent 父页面
        				window.parent.location.reload();
        			});
        		}else if(res == 0){
        			layer.msg('配件数量不足~');
        		}else{
        			layer.msg('网络延迟~');
        		}
        	},'json');
        	$.ajaxSettings.traditional = false; //全局设置ajax的属性
            return false;
        });

    });
</script>
</body>
</html>